import { useState } from 'react'
import Resume from '../components/Resume/Resume'
import ResumeProgress from '../components/Resume/ResumeProgress'

const ResumeView = () => {
  const [data, setData] = useState(
    JSON.parse(localStorage.getItem('__resume__')) || {}
  )
  const handleUpdate = (update) => {
    const nextData = {
      ...data,
      ...update,
    }
    setData(nextData)
    localStorage.setItem('__resume__', JSON.stringify(nextData))
  }

  return (
    <div className="row d-flex border">
      <div className="col-9 border p-2">
        <Resume data={data} onUpdate={handleUpdate} />
      </div>
      <div className="col-3 border p-2">
        <ResumeProgress />
      </div>
    </div>
  )
}

export default ResumeView
